<template>
    <div class="Header">
        <div class="headerTop">
            <div class="w1200">
                <!-- <div class="address fl" @click="changeCityFlag=true">
                  <i class="el-icon-location-outline"></i>{{currentCity}}<span>[切换城市]</span>
                </div> -->
                <div class="right fr">
                    <template v-if="loginStatus==1">
                        <div class="user fr">
                            <router-link :to="{name:'Person'}">
                                <el-avatar :size="24" :src="userInfo.photoId_dictText"></el-avatar>
                                <div class="name">{{ userInfo.name }}</div>
                            </router-link>
                            <div class="dropDown">
                                <ul>
                                    <li>
                                        <router-link tag="div" class="title" :to="{name:'Person'}">个人中心</router-link>
                                        <router-link tag="span" class="item" :to="{name:'Person'}">推荐职位</router-link>
                                        <router-link tag="span" class="item" :to="{name:'PersonResume'}">编辑简历
                                        </router-link>
                                    </li>
                                    <li>
                                        <router-link tag="div" class="title" :to="{name:'PersonSettingPassWord'}">账号设置
                                        </router-link>
                                        <router-link tag="span" class="item" :to="{name:'PersonSettingPassWord'}">修改密码
                                        </router-link>
                                        <router-link tag="span" class="item" :to="{name:'PersonSettingPhone'}">修改手机号
                                        </router-link>
                                        <!-- <router-link tag="span" class="item" :to="{name:'PersonSettingWechat'}">绑定微信号</router-link> -->
                                    </li>
                                    <li>
                                        <div class="title signOut" @click="signOut">退出登录</div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="enter fr">
                            <router-link :to="{name:'PersonMessage'}" class="btnMessage">
                                <el-badge :value="messageCount" class="item">消息</el-badge>
                            </router-link>
                            <router-link :to="{name:'PersonResume'}" class="btnResume">简历</router-link>
                        </div>
                    </template>
                    <template v-else>
                        <div class="login fr">
                            <router-link :to="{name:'Login'}">注册</router-link>
                            <span></span>
                            <router-link :to="{name:'Login'}">登录</router-link>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div class="headerBottom">
            <div class="w1200">
                <router-link :to="{name:'Index'}" class="logo fl"><img :src="logo"></router-link>
                <div class="nav fl">
                    <router-link :to="{name:'Index'}" class="item" :class="navActive==0?'active':''">首页</router-link>
                    <router-link :to="{name:'Special'}" class="item" :class="navActive==1?'active':''">专场</router-link>
                    <!-- <router-link :to="{name:'SpecialIndex',query:{id:'1552832466132377601'}}" class="item" :class="navActive==1?'active':''">专场</router-link> -->
                    <router-link :to="{name:'Job'}" class="item" :class="navActive==2?'active':''">职位</router-link>
                    <router-link :to="{name:'School'}" class="item" :class="navActive==3?'active':''">校园招聘</router-link>
                    <router-link :to="{name:'News'}" class="item" :class="navActive==4?'active':''">动态/资讯</router-link>
                    <!-- <a href="https://ump.hn-talent.com/assessment?tenantId=kr" class="my_link" target="_blank">人才测评</a> -->
<!--                    <router-link :to="{name:'Broadcast'}" class="item" :class="navActive==5?'active':''">直播带岗</router-link>-->
                </div>
<!--                <div class="upload fr" v-if='loginStatus==1' @click="UploadResumeFlag=!UploadResumeFlag"><i
                    class="el-icon-upload2"></i>上传简历
                </div>-->
            </div>
        </div>
        <el-dialog title="切换城市" width="800px" :visible.sync="changeCityFlag">
            <div class="changeCity">
                <div class="text">
                    <h2>亲爱的用户您好：</h2>
                    <p>切换城市分站，让我们为您提供更准确的信息</p>
                </div>
                <div class="changeCityBlock">
                    <div class="t">当前定位：</div>
                    <a class="item" @click="chooseCity(locationCity)"><i
                        class="el-icon-location-outline"></i>{{ locationCity }}</a>
                </div>
                <div class="changeCityBlock">
                    <div class="t">切换到以下城市</div>
                    <a class="item" v-for="(item,index) in citys" :key="index" @click="chooseCity(item)">{{ item }}</a>
                </div>
            </div>
        </el-dialog>
        <!-- 上传简历 -->
        <UploadResume :UploadResume="UploadResumeFlag" @UploadResumeClose="UploadResumeFlag=false"/>
        <!-- 投递简历 -->
        <SendResume :SendResume="SendResumeFlag" @SendResumeClose="SendResumeFlag=false" @LookEnclosure="LookEnclosure"
                    :JobId='JobId'/>
        <!-- 预览附件简历 -->
        <LookEnclosure :LookEnclosure="LookEnclosureFlag" @LookEnclosureClose="LookEnclosureFlag=false"/>
    </div>
</template>

<script>
import {messageCount, signOut} from '@/api/api'
import UploadResume from '@/components/UploadResume.vue'
import SendResume from '@/components/SendResume.vue'
import LookEnclosure from '@/components/LookEnclosure.vue'

export default {
    //组件注入
    components: {UploadResume, SendResume, LookEnclosure},
    //存放数据
    data() {
        return {
            loginStatus: localStorage.getItem('loginStatus'),//登录状态
            currentCity: '郑州',
            locationCity: '郑州',
            citys: ['开封', '洛阳', '焦作', '三门峡', '周口'],
            logo: require("../assets/logo.png"),
            changeCityFlag: false,//切换城市
            UploadResumeFlag: false,//上传简历
            SendResumeFlag: false,//上传简历
            LookEnclosureFlag: false,//预览简历
            userInfo: {},//用户信息
            messageCount: 0,//未读消息
            JobId: '',
        }
    },
    //接受父组件传递的值
    props: ['navActive', 'random',],
    //监控data中的数据变化
    watch: {
        random(val) {
            setTimeout(() => {
                this.getUserInfo()
            }, 100)
        },
    },
    //方法集合
    methods: {
        //切换城市选择
        chooseCity(city) {
            this.changeCityFlag = false
            this.currentCity = city
            console.log(this.currentCity)
        },
        //退出登录
        signOut() {
            signOut().then(res => {
                if (res.code == 200) {
                    this.loginStatus = 0
                    this.$emit('loginStatus', this.loginStatus)
                    this.$message.success('退出成功');
                    localStorage.clear()
                    this.$router.push({name: 'Index'})
                }
            });
        },
        //获取用户数据
        getUserInfo() {
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        },
        //预览附件简历
        LookEnclosure(e) {
            this.LookEnclosureFlag = e.LookEnclosureFlag
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        //判断登录状态
        if (this.userLoginFlag1()) {
            //未读消息
            messageCount({}, false).then(res => {
                if (res.code == 200) {
                    this.messageCount = res.result
                }
            });
            //心跳
            setInterval(() => {
                //未读消息
                messageCount({}, false).then(res => {
                    if (res.code == 200) {
                        this.messageCount = res.result
                    }
                });
            }, 360000);
        }
    },
};
</script>
<style lang="scss">
@mixin text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@mixin text-ellipsisclamp($clamp) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $clamp;
    overflow: hidden;
}

@mixin transition {
    transition: all .3s;
}

.Header {
    height: auto;
    position: relative;

    .my_link {
        font-size: 16px;
        color: #333;
        margin-right: 50px;
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }

    .headerTop {
        width: 100%;
        height: 40px;
        background: #403E3E;
        position: relative;
        z-index: 1;

        .address {
            line-height: 40px;
            font-size: 13px;
            color: rgba($color: #fff, $alpha: .6);
            cursor: pointer;

            .el-icon-location-outline {
                font-size: 16px;
                margin-right: 3px;
                vertical-align: -1px;
            }

            span {
                margin-left: 5px;
            }
        }

        .right {
            font-size: 14px;
            color: rgba($color: #fff, $alpha: .6);

            a {
                height: 40px;
                line-height: 40px;
                color: rgba($color: #fff, $alpha: .6);
                display: inline-block;
            }

            .enter {
                .el-badge__content {
                    top: 12px;
                    border: 0;
                }

                a {
                    margin-left: 30px;

                    &:first-child {
                        margin: 0;
                    }
                }
            }

            .login {
                margin-left: 50px;

                span {
                    display: inline-block;
                    width: 1px;
                    height: 12px;
                    background: rgba($color: #fff, $alpha: .6);
                    margin: 0 12px;
                    vertical-align: -1px;
                }
            }

            .user {
                padding-left: 30px;

                a {
                    display: flex;
                    align-items: center;
                }

                .el-avatar {
                    margin-right: 8px;
                }

                .dropDown {
                    display: none;
                    position: absolute;
                    right: 0;
                    top: 40px;
                    background-color: #fff;
                    box-shadow: 0px 3px 8px rgba(190, 190, 190, 0.26);

                    ul {
                        height: auto;
                        overflow: hidden;

                        li {
                            height: auto;
                            overflow: hidden;
                            padding: 15px 25px;
                            border-bottom: 1px solid #eee;
                            position: relative;

                            .title {
                                font-size: 14px;
                                color: #333;
                                margin-bottom: 5px;
                                cursor: pointer;
                                @include transition();

                                &.signOut:hover {
                                    color: #E54437;
                                }
                            }

                            .item {
                                font-size: 12px;
                                color: #999;
                                line-height: 22px;
                                margin-right: 15px;
                                cursor: pointer;
                                @include transition();

                                &:hover {
                                    color: #E54437;
                                }
                            }
                        }
                    }
                }

                &:hover {
                    .dropDown {
                        display: block;
                    }
                }
            }
        }
    }

    .headerBottom {
        width: 100%;
        height: auto;
        overflow: hidden;
        background: #fff;
        padding-top: 15px;
        position: relative;
        z-index: 0;

        .logo {
            width: 159px;
            margin-right: 110px;

            img {
                width: 100%;
            }
        }

        .nav {
            overflow: hidden;

            .item {
                font-size: 16px;
                color: #333;
                margin-right: 50px;
                display: inline-block;
                position: relative;
                height: 60px;
                line-height: 50px;
                padding-bottom: 15px;

                &:after {
                    content: "";
                    width: 0;
                    height: 3px;
                    background: #E54437;
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    @include transition()
                }

                &.active, &:hover {
                    &:after {
                        width: 100%;
                    }
                }

                &.active {
                    font-weight: bold;
                }

                &:hover {
                    color: #E54437;
                }
            }
        }

        .upload {
            font-size: 15px;
            color: #777;
            line-height: 50px;
            cursor: pointer;
            @include transition();

            i {
                font-size: 18px;
                margin-right: 8px;
                vertical-align: -2px;
            }

            &:hover {
                color: #E54437;
            }
        }
    }
}

.changeCity {
    height: auto;
    overflow: hidden;

    .text {
        height: auto;
        overflow: hidden;
        border-bottom: 1px solid #dedede;
        padding-bottom: 20px;
        margin-bottom: 20px;

        h2 {
            font-size: 16px;
            line-height: 30px;
            color: #000;
        }

        p {
            font-size: 14px;
            color: #333;
        }
    }

    .changeCityBlock {
        height: auto;
        overflow: hidden;
        margin-top: 25px;

        .t {
            font-size: 14px;
            color: #333;
            margin-bottom: 15px;
        }

        .item {
            width: 100px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            background: #FBF6F6;
            color: #A58986;
            text-align: center;
            display: inline-block;
            margin-right: 20px;

            i {
                margin-right: 2px
            }

            &:hover, &.active {
                background: #E54437;
                color: #fff;
            }
        }
    }
}
</style>
